<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>测量结果</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style type="text/css">
        .detail {
            padding-right: 20px!important;
        }

        h5 {
            color: #0062CC;
        }

        .mui-navigate-right .mui-col-xs-8 {
            width: 62.666667%!important;
        }
    </style>
</head>

<body>
    <div class="mui-content">
    	<!-- 图表容器 DOM -->
    	<div id="container" style="height:300px;"></div>
        <ul class="mui-table-view mui-table-view-chevron type_list_spair">
            <li class="mui-table-view-cell detail">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">测点编码：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="pointnum"></span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell detail">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">测点名称：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="description"></span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell detail">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">资产所属位置：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="assetLoaction"></span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell detail">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">上限报警值：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="upperwarning"></span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell detail">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">下限报警值：</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8 mui-text-right">
                        <span class="mui-h5" id="lowerwarning"></span>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="mui-table-view deal_list type_list_spair" id="deal_list">
            <!-- 模板引擎 -->
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../script/highcharts.js"></script>
<script type="text/temmlate" id="tmpList">
    {{each datas as item}}
    <li class="mui-table-view-cell">
        <div class="mui-table">
            <div class="mui-table-cell mui-col-xs-8">
                <h4 class="mui-ellipsis" id="measurement_value">测量结果：{{item.measurementvalue}}</h4>
                <p class="mui-h6 mui-ellipsis" id="measurement_time">测量日期：{{item.measuredate}}</p>
            </div>
            <div class="mui-table-cell mui-col-xs-4 mui-text-right">
                <span class="mui-h5" id="measurement_person">记录人：{{item.inspectorName}}</span>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script type="text/javascript">
    apiready = function() {
        onLoadData()
        scrollToBottomHandler(function() {
            if (!loadEnd) { // 没有结束时继续加载
                curPage++;
                onLoadData(curPage, true);
            } else { // 告诉到底了
                EndToast('到底了');
            }
        })
        Refresh(function() {
            tjsearch();
        });
        api.addEventListener({
            name: 'successAdd'
        }, function(ret, err) {
            if (ret.value.isSuccess) {
                onloadData()
            }
        });
        api.addEventListener({
            name: 'navitembtn'
        }, function(ret, err) {
            if (ret.type == 'right') {
                openSaveWin('status_monitoing_add', '添加测点',{
                    num: api.pageParam.num
                })
            }
        })
    }

    //绘制测点结果曲线 add by luohan 2019.11.17
    //1.top 上限值
    var topDataArr = [];
    //2.bottom 下限值
    var bottomDataArr = [];
    //3.real 实际值
    var realDataArr = [];
    //4.dateCategories
    var dateCategoriesArr = [];

    function getCheckPointChart(){
    	//1.设置图表窗口自适应手机宽度
    	$api.css($api.byId("container"), 'width:100%');

		//2.图表配置
        var options = {
			chart: {
				type: 'spline'
			},
			title: {
				text: '测点曲线'
			},
			xAxis: {
				categories: dateCategoriesArr
			},
			yAxis: {
				title: {
					text: '测点'
				},
				labels: {
					formatter: function () {
						return this.value;
					}
				}
			},
			tooltip: {
				crosshairs: true,
				shared: true
			},
			plotOptions: {
				spline: {
					marker: {
						radius: 4,
						lineColor: '#666666',
						lineWidth: 1
					}
				}
			},
			series: [{
				name: '上限报警值',
				marker: {
					symbol: 'diamond'//曲线点类型：”circle”, “square”, “diamond”, “triangle”,”triangle-down”，默认是”circle”
				},
				data: topDataArr
			}, {
				name: '下限报警值',
				marker: {
					symbol: 'diamond'
				},
				data: bottomDataArr
			},
			{
				name: '实测值',
				marker: {
					//symbol: 'diamond'
				},
				data: realDataArr
			}]
		};
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    }

    function onLoadData() {
        var dataArr = [
            [],
            [],
            []
        ]
        var timeArr = []
        var maxValue, minVlaue
        var UILineChart = api.require('UILineChart');
        ajaxrd("queryPointDetail", {
            measurepointid: api.pageParam.id
        }, function(data) {
            if (data.list.length < 10) {
                loadEnd = true
            }
            $api.html($api.byId('pointnum'), data.pointnum)
            $api.html($api.byId('description'), data.description)
            $api.html($api.byId('assetLoaction'), data.assetLoaction)
            $api.html($api.byId('upperwarning'), data.upperwarning)
            $api.html($api.byId('lowerwarning'), data.lowerwarning)
            if (!data.list.length) {
              api.toast({
    						msg : "数据为空",
    						duration : 1000,
    						location : 'middle'
    					});
              return false
            }
            AddData('tmpList', 'deal_list', data.list);
            var newData = data.list.splice(0, 20)
            var max = newData[0].measurementvalue;
            for (var i = 1; i < newData.length; i++) {
                var cur = newData[i].measurementvalue;
                cur > max ? max = cur : null
            }
            var min = newData[0].measurementvalue;
            for (var i = 1; i < newData.length; i++) {
                var cur = newData[i].measurementvalue;
                cur < min ? min = cur : null
            }
            //dataArr[0].push(max)
            //dataArr[2].push(min)
            var maxVal = max
            var minVal = min

            upperwarning = parseFloat(data.upperwarning);
            lowerwarning = parseFloat(data.lowerwarning);

            if(maxVal < upperwarning){
            	maxVal = upperwarning + 1;
            }

            if(minVal > lowerwarning){
            	minVal = lowerwarning - 1;
            }

//          for (var item of newData) {
//              dataArr[1].push(item.measurementvalue)
//              timeArr.unshift(item.measuredate.split(" ")[0].slice(5))
//          }

            for (var i=newData.length-1; i>=0; i--) {
                dataArr[0].push(newData[i].measurementvalue);
                dataArr[1].push(upperwarning);
                dataArr[2].push(lowerwarning);

                timeArr.unshift(newData[i].measuredate.split(" ")[0].slice(20))
            }

            topDataArr = dataArr[1];
            bottomDataArr = dataArr[2];
            realDataArr = dataArr[0];

            dateCategoriesArr = timeArr;

            getCheckPointChart();

//          UILineChart.open({
//              rect: {
//                  x: 0,
//                  y: 20,
//                  w: 350,
//                  h: 200
//              },
//              xAxis: {
//                  indexs: timeArr,
//                  screenXcount: 5
//              },
//              yAxis: {
//                  max: maxVal,
//                  min: minVal,
//                  step: (maxVal - minVal) / 9,
//                  base: 0
//              },
//              datas: dataArr,
//              styles: {
//                  xAxis: {
//                      bg: '#b2dfee',
//                      markColor: '#888',
//                      markSize: 12
//                  },
//                  yAxis: {
//                      bg: '#b2dfee',
//                      markColor: '#888',
//                      markSize: 12
//                  },
//                  coordinate: {
//                      bg: '#fcfcfc',
//                      color: '#cacaca',
//                      baseColor: 'bbb',
//                  },
//                  colors: ['#800080', '#7FFFAA']
//              },
//              fixedOn: api.frameName,
//              fixed: false
//          }, function(ret, err) {});
        })
    }
</script>

</html>
